<div class="main-content">
    <div class="section-header">
        <h2>添加主机配置</h2>
    </div>
    
    <form action="/db/addRoute" method="post" class="form-container" id="addForm">
        <div class="form-row">
            <label for="modid">模块ID</label>
            <input type="text" id="modid" name="modid" required>
        </div>
        
        <div class="form-row">
            <label for="cmdid">子模块ID</label>
            <input type="text" id="cmdid" name="cmdid" required>
        </div>
        
        <div class="form-row">
            <label for="serverip">主机IP</label>
            <input type="text" id="serverip" name="serverip" required>
        </div>
        
        <div class="form-row">
            <label for="serverport">主机端口号</label>
            <input type="text" id="serverport" name="serverport" required>
        </div>

        <div class="form-actions">
            <a href="/db/routes" class="btn btn-secondary">取消</a>
            <button type="submit" class="btn btn-primary">添加</button>
        </div>
    </form>
</div>

<style>
    .main-content {
        background-color: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .section-header {
        margin-bottom: 1.5rem;
    }

    .section-header h2 {
        margin: 0;
        color: #333;
    }

    .form-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .form-row {
        margin-bottom: 1.5rem;
    }

    .form-row label {
        display: block;
        margin-bottom: 0.5rem;
        color: #333;
        font-weight: 600;
    }

    .form-row input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
    }

    .form-row input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 2rem;
    }

    @media (max-width: 768px) {
        .form-container {
            padding: 0 1rem;
        }
    }
</style>

<script>
document.getElementById('addForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const modid = document.getElementById('modid').value;
    const cmdid = document.getElementById('cmdid').value;
    const serverip = document.getElementById('serverip').value;
    const serverport = document.getElementById('serverport').value;
    
    // 验证IP地址格式
    const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
    if (!ipRegex.test(serverip)) {
        showError('IP地址格式不正确');
        return;
    }
    
    try {
        const response = await fetch('/api/routes', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ modid, cmdid, serverip, serverport })
        });
        
        const data = await response.json();
        if (data.status === 'success') {
            showSuccess('添加成功');
            setTimeout(() => {
                window.location.href = '/db/routes';
            }, 1500);
        } else {
            showError(data.message || '添加失败');
        }
    } catch (error) {
        console.error('添加路由失败:', error);
        showError('添加失败');
    }
});

// 显示成功消息
function showSuccess(message) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-success';
    alert.textContent = message;
    document.querySelector('.main-content').insertBefore(alert, document.querySelector('.form-container'));
    setTimeout(() => alert.remove(), 3000);
}

// 显示错误消息
function showError(message) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger';
    alert.textContent = message;
    document.querySelector('.main-content').insertBefore(alert, document.querySelector('.form-container'));
    setTimeout(() => alert.remove(), 3000);
}
</script>

